<template>
<div>
    <!-- 搜索框 -->
    <van-search
  v-model="value"
  show-action
  disabled
  label="上海"
  left-icon
  placeholder="请输入小区或地址"
  @search="onSearch"
>
<template #label >
  <div @click='clickFn'>上海<span class="three">▾</span></div>
</template>
<template #left>
<van-icon class='left' name="arrow-left" @click='backFn'/>
</template>
  <template #action>
    <van-icon name="aim" />
  </template>
</van-search>
<!-- 列表分类标题 -->
<ListTitle :id='id'/>
<!-- 列表内容 -->
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  :immediate-check='false'
  offset='50'
  @load="onLoad"
>
<CellList v-for='(item,index) in cityList' :key='index' :item='item'/>
</van-list>

</div>
</template>

<script>
import ListTitle from '@/components/ListTitle.vue'
import CellList from '@/components/CellList.vue'
import { cityListApi } from '@/api'
export default {
  components: {
    CellList,
    ListTitle
  },
  async created () {
    // const res = await hotCityApi()
    // console.log(res)
    // await this.getCityRul()
    await this.getCityList()
  },
  data () {
    return {
      value: '',
      listTitle: ['区域', '方式', '租金'],
      city: {
        cityId: this.$store.state.id,
        area: '',
        subway: '',
        rentType: '',
        price: '',
        more: '',
        roomType: '',
        oriented: '',
        characteristic: '',
        floor: '',
        start: 1,
        end: 20
      },
      id: {
        id: this.$store.state.id
      },
      cityList: [],
      loading: false,
      finished: false
    }
  },
  watch: {
    // id () {
    //   this.$store.commit('saveId')
    // }
  },
  methods: {
    // 获取房屋列表信息
    async getCityList () {
      const res = await cityListApi(this.city)
      if (res.data.body.list.length === 0) {
        this.finished = true
      } else {
        this.finished = false
        this.loading = false
      }
      this.cityList = [...this.cityList, ...res.data.body.list]
      this.$store.state.list = this.cityList

      // console.log(this.cityList)
    },
    onSearch () {},
    backFn () {
      history.back()
    },
    clickFn () {
      this.$router.push({
        path: '/city'
      })
    },
    onLoad () {
      // this.finished = false
      this.city.start += 20
      this.city.end += 20
      this.getCityList()
      // this.loading = false
    }
  }
}
</script>

<style>
.van-icon{
  font-size: 30px;
}
.van-search__action{
  line-height:0;
}
.left{
  color:#fff;
  font-size:25px
}
.van-search{
  background-color:#21b97a
}
.van-search__content{
  border-radius:5px;
 margin-left:20px;

}
.three{
  font-size:20px;
  line-height: 0;
  vertical-align:middle
}
/* .van-dropdown-menu {
  position:sticky;
  top:0;
} */
</style>
